import React, { Component } from 'react'
// 引入 store ，用于获取redux中储存的状态
import store from '../../redux/store'

export default class Count extends Component {

  // 组件中更新render
  // componentDidMount() {
  //   // 监测 redux 中的状态变化
  //   store.subscribe(() => {
  //     // 更新 state
  //     this.setState({})
  //   })
  // }

  // 创建 Ref 容器
  myRef = React.createRef()

  // 加法回调函数
  onAdd = () => {
    // 获取 Ref 容器中的值
    const {value} = this.myRef.current
    // 更新状态
    store.dispatch({
      type: 'INCREMENT',
      payload: parseInt(value)
    })
  }

  // 减法回调函数
  onSubtract = () => {
    const {value} = this.myRef.current
    // 更新状态
    store.dispatch({
      type: 'DECREMENT',
      payload: parseInt(value)
    })
  }

  // 奇数再加 回调函数
  onAddOdd = () => {
    const {value} = this.myRef.current
    const count = store.getState()
    // 判断是否为奇数
    if(count % 2 !== 0){
      // 更新状态
      store.dispatch({
        type: 'INCREMENT',
        payload: parseInt(value)
      })
    }else{
      return console.log("当前求和为：偶数")
    }
  }

  // 异步加 回调函数
  onAddAsync = () => {
    const {value} = this.myRef.current
    // 模拟异步操作
    setTimeout(() => {
      // 更新状态
      store.dispatch({
        type: 'INCREMENT',
        payload: parseInt(value)
      })
    }, 500)
  }

  render() {
    return (
      <div>
        <h1>当前求和为: {store.getState()}</h1>
        <select ref={this.myRef} style={{ margin: '10px', padding:'10px' }}>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>&nbsp;
        <button 
          style={{ padding:'10px' }}
          onClick={this.onAdd}
        >+
        </button>&nbsp;
        <button 
          style={{ padding:'10px' }}
          onClick={this.onSubtract}
        >-
        </button>&nbsp;
        <button 
          style={{ padding:'10px' }}
          onClick={this.onAddOdd}
        >当前求和为奇数加
        </button>&nbsp;
        <button 
          style={{ padding:'10px' }}
          onClick={this.onAddAsync}
        >异步加
        </button>&nbsp;
      </div>
    )
  }
}
